<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="${basePath}/css/style.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/css/my.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${basePath}/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="${basePath}/css/jquery.validate.css"/>
<script type="text/javascript" src="${basePath}/js/validation/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${basePath}/js/validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="${basePath}/js/validation/messages_zh.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		
		$(".name555").change(function(){
			var path = "${basePath}";
			var name = $(this).val();
			$.ajax({
				url : path + '/manage/isname',
				type : 'POST', // GET
				async : false, // 或false,是否异步
				data : {
					'name' : name
				},
				timeout : 5000, // 超时时间
				dataType : 'json', // 返回的数据格式：json/xml ml/script/jsonp/text
				success : function(data) {
					$('.name555').next().empty();
					if(!data){
						$('.name555').after('<label id="admin-error" style="color:#008000" for="admin">未使用的名称，可以添加</label>');
					}else{
						$('.name555').after('<label id="admin-error" for="admin">已有的名称，请查阅</label>');
					}
				},
				error : function(xhr, textStatus) {
					alert('错误' + textStatus);
				}
			});
		});
		
		$(".name444").change(function(){
			var path = "${basePath}";
			var name = $(this).val();
			$.ajax({
				url : path + '/category/isname',
				type : 'POST', // GET
				async : false, // 或false,是否异步
				data : {
					'name' : name
				},
				timeout : 5000, // 超时时间
				dataType : 'json', // 返回的数据格式：json/xml ml/script/jsonp/text
				success : function(data) {
					$('.name444').next().empty();
					if(!data){
						$('.name444').after('<label id="admin-error" style="color:#008000" for="admin">未使用的名称，可以添加</label>');
					}else{
						$('.name444').after('<label id="admin-error" for="admin">已有的名称，请查阅</label>');
					}
				},
				error : function(xhr, textStatus) {
					alert('错误' + textStatus);
				}
			});
		});
		
		$(".click").click(function() {
			$(".tip3").fadeIn(200);
		});

		$(".tiptop a").click(function() {
			$(".tip").fadeOut(200);
			$(".tip4").fadeOut(200);
			$(".tip3").fadeOut(200);
			$(".tip2").fadeOut(200);
		});

		$(".sure").click(function() {
			$(".tip").fadeOut(100);
		});

		$(".cancel").click(function() {
			$(".tip").fadeOut(100);
			$(".tip4").fadeOut(200);
			$(".tip3").fadeOut(200);
			$(".tip2").fadeOut(100);
		});
		
		$("#mainFrom").validate({
			rules:{
				"name" : "required",
			},
			message:{
				
			}
		});
		
		$("#mainFrom2").validate({
			rules:{
				"name" : "required",
			},
			message:{
				
			}
		});
	});

	function onModified(url, name) {
		$("#im").attr("src", url);
		$("#na").html(name);
		$(".tip").fadeIn(200);
	}

	function isfile() {
		var file = $("#imgFile").val();
		if (file != null) {
			$("#title").val("图片已成功上传图片");
			$("#title").css("color", "#00F");
		}
	}
	
	function isfile2() {
		var file = $("#imgFile2").val();
		if (file != null) {
			$("#title2").val("图片已成功上传图片");
			$("#title2").css("color", "#00F");
		}
	}
	
	function onck(desc,id) {
		$('#id').val(id);
		$('#name1').val(desc);
		$(".tip2").fadeIn(200);
	}
	
	function del(desc,id) {
		$('#id2').val(id);
		$('#name3').val(desc);
		$(".tip4").fadeIn(200);
	}
</script>
</head>
<body>
	<div class="place">
		<span>位置：</span>
		<ul class="placeul">
			<li><a href="#">首页</a></li>
			<li><a href="#">分类管理</a></li>
		</ul>
	</div>

	<div class="rightinfo">

		<div class="tools">

			<ul class="toolbar">
				<li class="click"><span><img
						src="${basePath}/images/t01.png" /></span>添加</li>
			</ul>
		</div>

		<table class="tablelist">
			<thead>
				<tr>
					<th>编号</th>
					<th>名称</th>
					<th>分类图片</th>
					<th>操作</th>
				</tr>
			</thead>
			<c:forEach items="${list}" var="item" varStatus="s">
				<tr>
					<td>${item.id}</td>
					<td><a href="${basePath}/category/detaile?id=${item.id}" style="color:#00F">${item.name}</a></td>
					<td><a style="color:#00F" href="javascript:void(0)" onclick="onModified('${item.img.url}','${item.name}')">图片</a></td>
					<td><a style="color:#00F" href="javascript:void(0)" class="tablelink" onclick="onck('${item.name}','${item.id}')">修改</a>
					<a style="color:#00F" href="javascript:void(0)" class="delete" onclick="del('${item.name}','${item.id}')">删除</a></td>
				</tr>
			</c:forEach>
		</table>


		<div class="tip">
			<div class="tiptop">
				<span>查看图片</span><a></a>
			</div>

			<form method="post" class="basic-grey">
				<h1>
					查看该项的图片 <span>查看产品图片为：<span style="color:#F00" id="na"></span></span>
				</h1>
				<image style="width:450px;height:450px;margin-left:10px;" id="im"
					src=""></image>
			</form>
		</div>

		<div class="tip2">
			<div class="tiptop">
				<span>修改分类信息</span><a></a>
			</div>

			<form id="mainFrom2" method="post" action="${basePath}/category/modify" class="basic-grey" enctype="multipart/form-data">
				<h1>
					修改分类组信息 <span>你可以修改你的分类组信息！</span>
				</h1>
				<input type="hidden" id="id" name="id" /> 
				<label> 
					<span>分类名称 :</span> 
					<input id="name1" type="text" class="name555" name="name" />
				</label>
				<label> 
				<input id="title2" style="margin-left:101px;width:250px;color:red" type="text" value="请挑选对应图片" readonly="true" />
					<a href="javascript:" class="a-upload" style="color:#00F">选择图片
					<input id="imgFile2" name="imgFile" type="file" onchange="isfile2()" /></a>
				</label>
				<div class="tipbtn">
					<input name="" type="submit" class="sure" value="修改" />&nbsp; <input
						name="" type="button" class="cancel" value="取消" />
				</div>
			</form>
		</div>
		
		<div class="tip3">
			<div class="tiptop">
				<span>添加分类组</span><a></a>
			</div>

			<form id="mainFrom" method="post" action="${basePath}/category/inser" class="basic-grey" enctype="multipart/form-data">
				<h1>
					添加分类组<span>你可以创建一个新的分类组</span>
				</h1>
				<label> 
					<span>分类名称 :</span> 
					<input id="name" type="text" class="name444" name="name" />
				</label>
				<label> 
				<input id="title" style="margin-left:101px;width:250px;color:red" type="text" value="请挑选对应图片" readonly="true" />
					<a href="javascript:" class="a-upload" style="color:#00F">选择图片
					<input id="imgFile" name="imgFile" type="file" onchange="isfile()" /></a>
				</label>
				<div class="tipbtn">
					<input name="" type="submit" class="sure" value="添加" />&nbsp; <input
						name="" type="button" class="cancel" value="取消" />
				</div>
			</form>
		</div>
		
		<div class="tip4">
			<div class="tiptop">
				<span>删除分类组</span><a></a>
			</div>

			<form method="post" action="${basePath}/category/delete" class="basic-grey" enctype="multipart/form-data">
				<h1>
					删除该分类组 <span>你将要删除该分类组的所有信息（商品本身不受影响）</span>
				</h1>
				<input type="hidden" id="id2" name="id" /> 
				<label> 
					<span>分类名称 :</span> 
					<input id="name3" type="text" name="name" readonly="true" />
				</label>
				<div class="tipbtn">
					<input name="" type="submit" class="sure" value="删除" />&nbsp; <input
						name="" type="button" class="cancel" value="取消" />
				</div>
			</form>
		</div>

		<script type="text/javascript">
			$('.tablelist tbody tr:odd').addClass('odd');
		</script>
</body>

</html>
